<template>
  <div id="box">
    <el-row class="tac">

      <!-- 详情 -->
      <el-col :span="8"
              style="border:1px">
        <el-row style="margin-bottom:30px">
          <i class="el-icon-goods"
             style="font-size:20px">物品详情</i>
        </el-row>
        <el-row>
          <el-col :span="20">
            <div class="grid-content bg-purple">
              {{newServer.name}}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-image :src="newServer.image"
                    style="width:85%">
            <div slot="error"
                 class="image-slot">
              <div slot="error">
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2165691866,2570924737&fm=26&gp=0.jpg"
                     width="100%">
              </div>
            </div>
          </el-image>
        </el-row>
        <el-row>
          <el-col :span="10">
            <div class="grid-content bg-purple-dark">
              ¥：{{ newServer.price }}
            </div>
          </el-col>
          <el-col :span="10"
                  class="grid-content">
            <i class="el-icon-star-on"
               v-show="newServer.agree"
               @click="agreeGoods">取消称赞</i>
            <i class="el-icon-star-off"
               v-show="!newServer.agree"
               @click="agreeGoods">称赞此物品</i>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <div class="grid-content bg-purple-light">提供者： {{ newServer.account }}</div>
          </el-col>
          <div class="grid-content bg-purple-light">联系电话：{{newServer.phone}}</div>
        </el-row>
        <el-row>
          <el-col :span="10">
            <div class="grid-content bg-purple-light">浏览次数： {{ newServer.times }}</div>
          </el-col>
          <div class="grid-content bg-purple-light">点赞人数：{{newServer.agreeNum}}</div>
        </el-row>
        <el-col :span="20">
          <div class="grid-content bg-purple-light">{{newServer.content}}</div>
        </el-col>

      </el-col>

      <!-- 评论 -->
      <el-col :span="8"
              style="border:1px">
        <el-row style="margin-bottom:30px">
          <i class="el-icon-document"
             style="font-size:20px">物品评论</i>
        </el-row>

        <el-table :data="newServer.commentReplyDtoList"
                  style="width: 100%"
                  max-height="60%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left"
                       inline
                       class="demo-table-expand">

                <el-row>
                  <el-form-item label="回复时间："
                                style="width:100%">
                    <span>{{ props.row.replyTime }}</span>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="回复内容："
                                style="width:100%">
                    <span>{{ props.row.replyContent }}</span>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="操作："
                                style="width:100%"
                                v-show="props.row.mine">
                    <i class="el-icon-delete"
                       @click="del(props.row)">删除</i>
                  </el-form-item>

                  <el-form-item label="操作："
                                style="width:100%"
                                v-show="props.row.replyContent==null">
                    <i class="el-icon-edit"
                       @click="rep(props.row)">回复评论</i>
                  </el-form-item>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="评论者"
                           prop="commenterName">
          </el-table-column>
          <el-table-column label="评论时间"
                           prop="time">
          </el-table-column>
          <el-table-column label="评论内容"
                           prop="content">
          </el-table-column>

        </el-table>

      </el-col>

      <!-- 回复评论 -->
      <el-col :span="7"
              style="margin-left:4%">
        <el-row style="margin-bottom:30px">
          <i class="el-icon-edit"
             style="font-size:20px">回复评论</i>
        </el-row>
        <el-form ref="form"
                 :model="form"
                 label-width="70px">
          <el-row style="margin:20px;text-align:center">请在左侧评论列表内选择评论进行回复</el-row>

          <el-form-item label="当前回复"
                        v-show="form.id!=0">
            <el-row>{{form.content}}</el-row>
          </el-form-item>

          <el-form-item label="回复内容">
            <el-input type="textarea"
                      v-model="form.repContent"></el-input>
          </el-form-item>

          <el-form-item>
            <el-row>
              <el-button type="primary"
                         round
                         @click="onSubmit">回复</el-button>
              <el-button type="danger"
                         round
                         @click="deleteGoods">删除该物品</el-button>
            </el-row>
          </el-form-item>

        </el-form>

      </el-col>
    </el-row>

  </div>
</template>
<script>
import axios from 'axios'
import http from '../../../../axios_config'
export default {
  props: {
    server: {},
  },
  //当组件创建完毕后自动调用此方法
  created () {
    this.newServer = this.server;
    console.log(this.newServer);
  },
  data () {
    return {
      newServer: {},
      form: {
        content: "",
        repContent: '',
      },
      comment: {
        content: '',
      },
    }
  },
  methods: {

    rep (row) {
      this.form = row;
    },

    insertNewComment () {
      let newComment = {
        content: this.comment.content,
        gid: this.newServer.id,
      }
      http.post("http://192.168.11.18:8080/goodsComment/insertGoodsComment", newComment).then(res => {
        //success后执行 res是返回的结果 
        console.log(res);
        if (res.data == true) {
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          });
          this.refreshComment();
        } else {
          this.$message({
            showClose: true,
            message: '添加失败，请稍后再试',
            type: 'warning'
          });
        }
      });
    },
    del (row) {
      http.get("http://192.168.11.18:8080/goodsComment/deleteGoodsComment?id=" + row.id).then(res => {
        //success后执行 res是返回的结果 
        console.log(res);
        if (res.data == true) {
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          });
          this.refreshComment();
        } else {
          this.$message({
            showClose: true,
            message: '操作失败，请稍后再试',
            type: 'warning'
          });
        }
      });
    },

    refreshComment () {
      http.get("http://192.168.11.18:8080/goodsComment/selectGoodsCommentsDto?gid=" + this.newServer.id).then(res => {
        this.newServer.commentReplyDtoList = res.data;
      })
    },

    cancel () {
      this.$emit("closedialog")
    },

    agreeGoods () {
      http.post("http://192.168.11.18:8080/goods/agreeGoods?id=" + this.newServer.id);
      this.newServer.agree = !this.newServer.agree;
      if (this.newServer.agree == false) {
        this.newServer.agreeNum = this.newServer.agreeNum - 1;
      } else {
        this.newServer.agreeNum = this.newServer.agreeNum + 1;
      }

      if (res.data == true) {
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        });
      } else {
        this.$message({
          showClose: true,
          message: '操作失败失败，请稍后再试',
          type: 'warning'
        });
      };
    },


    deleteGoods () {
      http.delete("http://192.168.11.18:8080/goods/deleteGoods?id=" + this.newServer.id).then(res => {
        if (res.data == true) {
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          });
          this.$emit("closedialog", { result: true })
        } else {
          this.$message({
            showClose: true,
            message: '操作失败,请稍后在试',
            type: 'warning'
          });
        }
      })
    },



    onSubmit () {
      let goodsCommentReply = {
        cid: this.form.id,
        content: this.form.repContent,
      }
      console.log(goodsCommentReply);
      http.post("http://192.168.11.18:8080/goodsComment/insertGoodsCommentRep", goodsCommentReply).then(res => {
        //success后执行 res是返回的结果 
        if (res.data == true) {
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          });
          this.form = {};
          this.refreshComment();
        } else {
          this.$message({
            showClose: true,
            message: '操作失败',
            type: 'warning'
          });
        }
      });
    },

  }
}

</script>
<style scoped>
el-row {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.el-col {
  border-radius: 25px;
}
/* .bg-purple-dark {
  background: #99a9bf;
} */

/* .bg-purple-light {
  background: #e5e9f2;
} */
.grid-content {
  border-radius: 25px;
  min-height: 36px;
  text-align: center;
  padding-top: 15px;
  margin: 10px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bg-purple {
  background: #d3dce6;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>